<template>
	<wd-popup custom-style="background: transparent;" lockScroll :z-index="501" v-model="show" @close="handleClose">
		<view class="box">
			<view class="close" @click="handleClose">
				<wd-icon name="close" size="40rpx"></wd-icon>
			</view>
			<view class="classify-list">
				<view class="classify-list-item" @click="goPage('/case/release/release', { categoryId: item.id })"
					v-for="(item,index) in cateGoryTowList" :key="index">
					<view class="icon">
						<image :src="item.img"></image>
					</view>
					<view class="text">{{ item.title }}</view>
				</view>
			</view>
		</view>

	</wd-popup>
</template>

<script lang="ts" setup>
	import { ref, } from 'vue';
	import { getCategoryTwoList } from '@/api/index';
	import useRouter from '@/hooks/useRouter';
	const show = ref(false);
	const router = useRouter();
	const cateGoryTowList : any = ref([]);
	const handleClose = () => {
		show.value = false;
	}
	const handleOpen = () => {
		getCategoryTwoList().then(res => {
			cateGoryTowList.value = res;
			show.value = true;
		});
	}
	const goPage = (url : any, params ?: any) => {
		if (!url) {
			uni.$wdToast.error("暂未开放")
			return;
		}
		router.push({
			url,
			params
		})
	}

	defineExpose({
		handleOpen,
		handleClose
	})
</script>

<style lang="less" scoped>
	.box {

		.close {
			border-radius: 50%;
			overflow: hidden;
			width: 60rpx;
			height: 60rpx;
			background-color: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			right: 0;
			top: 0;
		}

		.classify-list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			width: 700rpx;
			margin: 40rpx calc((100vw - 700rpx) / 2) 0;
			background-color: #FFF;
			border-radius: 25rpx;

			&-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				padding: 12rpx 30rpx 0;
				flex: 0 0 calc((100% / 3) - 60rpx);
				min-height: 160rpx;

				.icon {
					width: 100rpx !important;
					/* 设置宽度 */
					height: 100rpx !important;

					/* 设置高度 */
					image {
						width: 100%;
						height: 100%;
					}
				}

				.text {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}
			}
		}
	}
</style>